<template>
  <div class='home-nva'>
    <div class="header">
      <Header />
    </div>
    <div class="content">
      <vue-seamless-scroll :data="listData" :class-option="classOption" class="warp">
        <ul class="ul-item">
          <li class="li-item" v-for="(item, index) in listData" :key="index">
            <img :src="item.image" alt="">
            <p>{{ item.id }}</p>
          </li>
        </ul>
      </vue-seamless-scroll>
      <div class="title">
        <h1>欢迎您回家</h1>
        <p>做好的东西展现给您</p>
      </div>
      <!-- 内容引入 -->
      <div>
        <Detail />
      </div>
    </div>
    <div class="footer">
      <Footer/>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import Header from '@/components/header.vue';
import Footer from '@/components/footer.vue';
import Detail from './components/index.vue';
export default {
  components: {vueSeamlessScroll, Header, Detail,Footer },
  data() {
    return {
      listData: [
        { id: 0, text: "图片1", image: require('@/assets/1.webp') },
        { id: 1, text: "图片2", image: require('@/assets/2.webp') },
        { id: 2, text: "图片3", image: require('@/assets/3.webp') },
      ],
      // 轮播
      classOption: {
        limitMoveNum: 3,
        direction: 2,
      }
    }
  },
  computed: {},
  watch: {},
  methods: {

  },
  created() {

  },
  mounted() {

  },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
.warp {
  width: 100%;
  height: 240px;
  margin: 0 auto;
  overflow: hidden;

  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;

    &.ul-item {
      display: flex;

      .li-item {
        width: 620px;
        height: 240px;
        margin-right: 10px;
        line-height: 240px;
        background-color: #999;
        color: #fff;
        text-align: center;
        font-size: 30px;

        img {
          background-size: cover;
        }
      }
    }
  }
}

.title {
  padding: 0 10%;

  h1 {
    font-size: 18px;
    padding: 10px 0;
  }

  p {
    font-size: 14px;
  }

}
</style>